/**
 * Bar图像的输出函数封装
 * 
 * @author XuGaoran
 * @since 1.0.0
 * @version 1.0.0
 */
import * as echarts from "echarts/core";
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  ToolboxComponent
} from "echarts/components";
import { BarChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";

import { EchartsClass } from "./EchartsClass";

/**
 * 柱状图的展示类
 */
export class BarEcharts extends EchartsClass {
  /**
   * 子类构造器
   * @param {HTMLElement} element HTML页面中的组件
   */
  constructor(element) {
    super(element);
  }

  /**
   * 重载方法，组建注册
   */
  echartsUse() {
    echarts.use([
      TitleComponent,
      TooltipComponent,
      ToolboxComponent,
      GridComponent,
      LegendComponent,
      BarChart,
      CanvasRenderer,
    ]);
  }

  /**
   * 重载方法，组件options的配置
   * @param {Object} response 需要的json数据的格式将在备注中完善
   * @returns 需要返回options的配置
   *
   * @note response类型如下所示。
   * {
   *   "title": string, 表格的标题
   *   "boundaryGap": [0, 0.001]
   *   "country": list 展示哪些城市
   *   "year": String 展示哪一年的数据
   *   "countryData": list对应的数据
   * }
   */
  setOption(response) {
    const option = {
      title: {
        text: response["title"],
        textStyle: {
          color: '#fff', // 设置标题文本颜色为白色
        },
        left: '15%', // 设置标题距离容器左侧的距离
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      legend: {
        left: '63%', // 设置标题距离容器左侧的距离

      },
      grid: {
        top: 40, // 添加空白的空间，单位为像素，您可以根据需要修改这个值
        bottom: 20, // 添加空白的空间，单位为像素，您可以根据需要修改这个值
      },
      xAxis: {
        type: "value",
        boundaryGap: response["boundaryGap"],
      },
      yAxis: {
        type: "category",
        data: response["country"],
      },
      series: [
        {
          name: response["year"],
          type: "bar",
          data: response["countryData"],
        },
      ],
    };
    return option;
  }
}
